<template>
    <div class="grey-container">
        <div class="grey-container-title">
            <div></div>
            <span>评论</span>
        </div>
        <div v-for="(item, index) in comments as Comment[]" :key="index">
            <n-divider v-if="index !== 0"></n-divider>
            <n-avatar
                round
                size="large"
                :src="item.avatar"
                :fallback-src="default_avatar"
                class="user-face"
            />
            <div class="comment-content">
                <div class="comment-title">
                    <n-text strong>{{ item.name }}</n-text>
                    <n-tag type="error" size="small" round v-if="item.is_top">置顶</n-tag>
                    <n-tag type="warning" size="small" round v-if="item.is_author">作者</n-tag>
                    <!-- 右侧评论操作栏 -->
                    <div style="margin-left: auto;">
                        <n-tooltip placement="bottom" trigger="hover" v-if="item.is_top && is_admin">
                            <template #trigger>
                                <n-icon size="20" color="#0077C2" @click="handleCancelTop(item.id)">
                                    <cancel-icon />
                                </n-icon>
                            </template>
                            <span>取消置顶</span>
                        </n-tooltip>
                        <n-tooltip placement="bottom" trigger="hover" v-if="!item.is_top && is_admin">
                            <template #trigger>
                                <n-icon size="20" color="#0077C2" @click="handleTop(item.id)">
                                    <top-icon />
                                </n-icon>
                            </template>
                            <span>置顶</span>
                        </n-tooltip>
                        <n-tooltip placement="bottom" trigger="hover">
                            <template #trigger>
                                <n-icon size="20" color="#FFBB1C" @click="handleReport(item.id)">
                                    <report-icon />
                                </n-icon>
                            </template>
                            <span>举报</span>
                        </n-tooltip>
                        <n-tooltip
                            placement="bottom"
                            trigger="hover"
                            v-if="item.is_author || is_admin"
                        >
                            <template #trigger>
                                <n-icon size="20" color="#EB5757" @click="handleDelete(item.id)">
                                    <delete-icon />
                                </n-icon>
                            </template>
                            <span>删除</span>
                        </n-tooltip>
                    </div>
                </div>
                <n-p>{{ item.content }}</n-p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <n-empty description="这里暂时还没有评论哦" v-show="comments.length === 0"></n-empty>
        <n-pagination
            :item-count="item_count"
            :page-sizes="[5, 10, 20]"
            showSizePicker
            :on-update:page="updatePage"
            :on-update:page-size="updatePageSize"
            :page="page"
            v-show="comments.length !== 0"
        />
        <div style="clear: both;"></div>
        <n-input
            class="comment-input"
            type="textarea"
            placeholder="发表一条友善的评论"
            :autosize="{
                minRows: 3
            }"
            maxlength="300"
            show-count
            v-model:value="my_comment"
        />
        <n-button class="comment-btn" type="primary" @click="publishComment">发表</n-button>
        <div style="clear: both;"></div>
    </div>
</template>

<script setup lang='ts'>
import Report from '@/views/paper/components/Report.vue'
import { VerticalAlignTopRound as TopIcon, DeleteRound as DeleteIcon, ReportProblemRound as ReportIcon, CancelRound as CancelIcon } from '@vicons/material'
import { h, watch } from '@vue/runtime-core'
import { useDialog, useMessage } from 'naive-ui'
import { getCurrentInstance, onMounted, ref } from 'vue';

// api访问代理
const { proxy } = getCurrentInstance() as any

// 声明 dialog 对象
const dialog = useDialog()

// 声明 message 对象
const message = useMessage()

// 默认头像
const default_avatar = "https://xs2.dailyheadlines.cc/citations/images/avatar_scholar_128.png"

// 声明评论类型
type Comment = {
    id: string;
    uid: string;
    avatar: string;
    content: string;
    time: Number;
    is_top: Boolean;
    is_author: Boolean;
    name: string;
}

const props = defineProps([
    'pid'
])

// 初始页数和每页展示数
const page = ref(1)
const page_size = ref(5)

// 更新页码
const updatePage = ((val: number) => {
    page.value = val
})

// 更新每页显示个数
const updatePageSize = ((val: number) => {
    page_size.value = val
})

watch(page, () => {
    getPaperComments()
})

watch(page_size, () => {
    getPaperComments()
})

// 评论
const comments = ref([]);

// 该用户是否可以管理该学术成果
const is_admin = ref(false);

// 总评论数
const item_count = ref(0);

// 获取论文评论
const getPaperComments = (() => {
    proxy.$api.paper.getComments({ id: props.pid, page: page.value, page_size: page_size.value }).then((result: any) => {
        if (result.success) {
            is_admin.value = result.is_admin
            comments.value = result.comments
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

// 加载时初始化评论
onMounted(() => {
    getPaperComments()
})

// 取消置顶
const handleCancelTop = ((id: string) => {
    dialog.info({
        title: '取消评论置顶',
        content: '是否确定取消该评论的置顶？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            proxy.$api.paper.topComment({ id: id }).then((result: any) => {
                if (result.success) {
                    message.success("取消置顶成功")
                    getPaperComments()
                } else {
                    message.warning(result.msg)
                }
            }).catch(() => {
                message.error('未知错误')
            });
        }
    })
})

// 置顶
const handleTop = ((id: string) => {
    dialog.info({
        title: '评论置顶',
        content: '是否确定置顶该评论？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            proxy.$api.paper.topComment({ id: id }).then((result: any) => {
                if (result.success) {
                    message.success("置顶成功")
                    getPaperComments()
                } else {
                    message.warning(result.msg)
                }
            }).catch(() => {
                message.error('未知错误')
            });
        }
    })
})

const report_value = ref(-1)

// 投诉
const handleReport = ((id: string) => {
    dialog.warning({
        title: '举报',
        content: (() => {
            return h(Report, {
                onChangeValue: (val: number) => {
                    report_value.value = val
                }
            })
        }),
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            if (report_value.value === -1) {
                message.warning("请先选择投诉理由")
                return false
            }
            proxy.$api.paper.reportComment({ id: id, reason: report_value.value }).then((result: any) => {
                if (result.success) {
                    message.success("投诉成功")
                } else {
                    message.warning(result.msg)
                }
            }).catch(() => {
                message.error('未知错误')
            });
        }
    })
})

// 删除
const handleDelete = ((id: string) => {
    dialog.error({
        title: '删除',
        content: '是否确定删除该评论？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            proxy.$api.paper.deleteComment({ id: id }).then((result: any) => {
                if (result.success) {
                    message.success("删除成功")
                    getPaperComments()
                } else {
                    message.warning(result.msg)
                }
            }).catch(() => {
                message.error('未知错误')
            });
        }
    })
})

const my_comment = ref('')

// 发表评论
const publishComment = (() => {
    if (my_comment.value.length === 0) {
        message.warning("请先输入您的评论")
        return
    }
    proxy.$api.paper.publishComment({ id: props.pid, content: my_comment.value }).then((result: any) => {
        if (result.success) {
            message.success("发表评论成功")
            getPaperComments()
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

</script>

<style scoped>
.grey-container {
    background: #fafafa;
    padding: 4em 2em 3em 2em;
    margin-bottom: 30px;
}

.grey-container-title {
    display: flex;
    position: absolute;
    margin-top: -3em;
    margin-left: -2em;
    font-weight: bold;
}

.grey-container-title :deep(div) {
    background: #000;
    height: 20px;
    width: 10px;
    margin-right: 5px;
}

.comment-title {
    display: flex;
    font-size: large;
    align-items: center;
}

.comment-title :deep(.n-tag) {
    margin-left: 10px;
}

.user-face {
    float: left;
    margin: 24px 0 0 5px;
    position: relative;
}

.comment-content {
    position: relative;
    margin-left: 85px;
    padding: 22px 0 14px 0;
}

.n-pagination {
    margin-top: 30px;
    float: right;
}

.comment-input {
    margin: 30px 0 10px 0;
}

.comment-btn {
    float: right;
}
</style>